<template>
    <div>
        <el-dialog title="插入公告" v-model="open" width="90%">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item prop="languageId" label="语言">
                    <el-select v-model="formData.languageId" placeholder="请选择">
                        <el-option :label="item" :value="index" v-for="(item, index) in languageList" :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="title" label="标题">
                    <el-input v-model="formData.title" type="text"></el-input>
                </el-form-item>
                <el-form-item prop="content" label="内容">
                    <quill-editor-modal :option="formData" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="loading" @click="onSubmit('formData')">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue"
import { insertAnnouncement, updateAnnouncement } from "@/api";
import { ElMessageBox, ElMessage } from "element-plus";

export default defineComponent({
    props: {
        Status: {
            type: Array,
        },
        languageList: {
            type: Array,
        },
    },
    setup(prop, nex) {
        const formRef = ref()
        const open = ref(false)
        const loading = ref(false)
        const formData = reactive({
            id: "",
            languageId: 0,
            title: "",
            content: "",
        })
        const rules = reactive({
            title: [{ required: true, message: "请输入标题", trigger: "blur" }],
            content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        })
        const show = (row) => {
            open.value = true
            if (row) {
                formData.id = row.Id;
                formData.languageId = row.LanguageId;
                formData.title = row.Title;
                formData.content = row.Content;
            } else {
                console.log("2312312312")
                formData.id = "";
                formData.languageId = 0;
                formData.title = "";
                formData.content = " ";
            }
        }
        const onSubmit = async () => {
            const a = await formRef.value.validate().catch(() => null)
            if (!a) return
            loading.value = true
            try {
                let res;
                if (formData.id) {
                    res = await updateAnnouncement(formData);
                } else {
                    res = await insertAnnouncement(formData);
                }
                if (res.data.code == 20) {
                    ElMessage.success("成功");
                    open.value = false;
                    nex.emit("load")
                }
            } catch (error) {
                ElMessage.error(error.message);
            }
            loading.value = false

        }
        return {
            formRef,
            open,
            loading,
            formData,
            rules,
            show,
            onSubmit
        }
    }
})
</script>
<style lang="scss" scoped>
.el-select,
.el-date-editor {
    width: 100%;
}
</style>